<template>
    <el-cascader placeholder="请选择地区" size="default" :options="regionData" v-model="selectedOptions" @change="id">
    </el-cascader>
    <div>
        <div>
            <el-button @click="Weather">天气</el-button>
            <el-button @click="id">获取id</el-button>
        </div>
        <div>
            城市id:{{ ctid }}
        </div>
        <div>
            <input type="text" v-model="latitude" @keyup.enter="Weather" :placeholder="ctid" />
        </div>
        <div v-for="(item, index) in weather" :key="index">
            预报日期：{{ item.fxDate }}
            相对湿度: {{ item.humidity }}
            日出时间：{{ item.sunrise }}
            日落时间：{{ item.sunset }}
            当天最高气温：{{ item.tempMax }}℃
            当天最低气温：{{ item.tempMin }}℃
            白天天气状况：{{ item.textDay }}
            夜晚天气状况：{{ item.textNight }}
            白天风向：{{ item.windDirDay }}
            夜晚风向：{{ item.windDirNight }}
            大气压强：{{ item.pressure }}千帕
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import axios from 'axios';
import { regionData } from 'element-china-area-data'
const handleChange = (value) => {
    console.log(value)
}
const selectedOptions = ref(null)
const weather = ref(null)
const latitude = ref(null)
const ctid = ref(null)

function Weather(city) {
    axios.get('/v7/weather/3d', {
        params: {
            location: city,
            key: 'bb27987da7054073b8a15fe703111fbc'
        }
    }).then((res) => {
        weather.value = res.data.daily
        console.log(weather);
    }).catch((err) => {
        console.log(err);
    })
}
function id() {
    axios.get('/v2/city/lookup', {
        params: {
            location: selectedOptions.value[2],
            key: 'bb27987da7054073b8a15fe703111fbc'
        }
    }).then((res) => {
        ctid.value = res.data.location[0].id
        Weather(res.data.location[0].id)
        console.log(res);
    }).catch((err) => {
        console.log(err);
    })
}

</script>